<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
<title>文章列表</title>
{{template "admin/html-head.html" .}}
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
{{template "admin/html-header.html" .}}
    <!-- Left side column. contains the logo and sidebar -->
{{template "admin/html-aside.html" .}}

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Data Tables
                <small>advanced tables</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Tables</a></li>
                <li class="active">Data tables</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">Data Table With Full Features</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="articlelist" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>title</th>
                                    <th>status</th>
                                    <th>createdAt</th>
                                    <th>updatedAt</th>
                                    <th width="120px">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {{/*<tr><td></td></tr>*/}}
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>title</th>
                                    <th>status</th>
                                    <th>createdAt</th>
                                    <th>updatedAt</th>
                                    <th>操作</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="pull-right hidden-xs">
            Anything you want
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    {{template "admin/html-control-sidebar.html"}}
    <!-- /.Control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- 弹窗内容-->

<!-- /弹窗内容-->

<!-- REQUIRED JS SCRIPTS -->
{{template "admin/html-js.html"}}
<!-- /REQUIRED JS SCRIPTS -->

<!-- page script -->
<script type="text/javascript">
    $(function() {
        //列表
        var articlelist = $('#articlelist').DataTable({
            language: {
                processing: "数据加载中……",
                zeroRecords: "No records to display"
            },
            paging: true,
            lengthChange: false,
            searching: true,
            ordering: true,
            info: true,
            autoWidth: false,
            serverSide: true,
            processing: true,
            ajax: function (data, callback, settings) {
                var postData = {
                    draw: data.draw,
                    perPage: data.length,
                    start: data.start,
                    search: data.search.value
                };
                $.ajax({
                    url: '/admin/api/articles',
                    type: 'GET', //GET
                    data: postData,
                    timeout: 5000,    //超时时间
                    dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    beforeSend: function (xhr) {
                        console.log('发送前')
                    },
                    success: function (res, textStatus, jqXHR) {
                        if(res.code == 1){
                            layer.msg(res.msg, {icon: 5});
                            return
                        }
                        var dtData = {
                            recordsTotal: res.data.total,
                            recordsFiltered: res.data.total,
                            data: res.data.result,
                            draw: res.data.draw
                        };
                        callback(dtData);
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误')
                    },
                    complete: function () {
                        console.log('结束')
                    }
                })
            },
            rowId: 'id',//自动设置行id
            columns: [
                {data: 'id'},
                {data: 'title'},
                {data: 'status'},
                {
                    data: 'created_at',
                    render: function (data, type, row) {
                        return moment(data).format("YYYY-MM-DD HH:mm:ss");
                    }
                },
                {
                    data: 'updated_at',
                    render: function (data, type, row) {
                        return moment(data).format("YYYY-MM-DD HH:mm:ss");
                    }
                },
                {
                    data: 'title',
                    render: function (data, type, row) {
                        var html = '<a class="J-update" href="/admin/page/article-edit?id='+row.id+'">编辑</a>'
                        return html;
                    }
                }
            ],
            "createdRow": function( row, data, dataIndex ) {
                 //有了DT_RowId属性就会自动添加id到行上,不需要在此操作，可以做其他事
                $(row).data("userName", data.userName);
            }
        });
        //删除
        $("#articlelist").on("click", ".J-delete", function () {
            var id = $(this).closest("tr").attr("id");
            if (confirm("确定删除？")) {
                $.ajax({
                    url: '/admin/api/articles/delete',
                    type: 'post', //GET
                    async: true,    //或false,是否异步
                    data: {
                        userId: id
                    },
                    timeout: 5000,    //超时时间
                    dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    beforeSend: function (xhr) {
                        console.log('发送前')
                    },
                    success: function (data, textStatus, jqXHR) {
                        if (data.code == 1){
                            layer.msg(data.msg, {icon: 5});
                            return
                        }
                        layer.msg("删除成功！", {icon: 6});
                        articlelist.ajax.reload();
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误')
                    },
                    complete: function () {
                        console.log('结束')
                    }
                })
            }
        });
    })
</script>
</body>
</html>